<script lang="ts" setup>
import { reactive, ref, watch } from "vue"
import { createTableDataApi, deleteTableDataApi, updateTableDataApi, getTableDataApi } from "@/api/table"
import { type CreateOrUpdateTableRequestData, type GetTableData } from "@/api/table/types/table"
import { type FormInstance, type FormRules, ElMessage, ElMessageBox } from "element-plus"
import { Search, Refresh, CirclePlus, Delete, Edit, RefreshRight } from "@element-plus/icons-vue"
import { usePagination } from "@/hooks/usePagination"
import { useRoute, useRouter } from "vue-router"
import AA from '@/views/label-manage/a.vue'
// import Journal from './journal.vue'

const s3 = ["盘库类型", "盘库人", '复核人']
const s5 = ["A-11-3 盘库人", "E-11 盘库人", "C-11 盘库人", "F-11 盘库人"]
const s4 = ['产品工号', '图号', '物料名称', "库位"]
const ss = [
  "盘库类型",
  '产品工号',
  '物料名称',
  "盘库人", '复核人',
  '库位',
]
const tableData2 = [
  {
    email0: '工号',
    email1: '10038495',
    email2: '轴承',
    email3: '王伟',
    email4: '赵信',
    email5: 'A-11-3，A-13-3',
  },
  {
    email0: '物料',
    email1: '10038505',
    email2: '小件',
    email3: '王伟',
    email4: '赵信',
    email5: 'A-11，B-13-3',
  },
  {
    email0: '库位',
    email1: '10038425',
    email2: '通用件',
    email3: '王伟',
    email4: '赵信',
    email5: 'A-1-3，A-13',
  },
]
const radio1 = ref('工号')
const tableData = ref([
  {
    email0: "DD00000002",
    email1: "100200176",
    email2: "印度",
    email3: "前大梁",
    email4: "盘库中",
    email5: "5#",
    email6: "GYDE-2-3",
    email8: "1/2",
    email16: 'B',
    email9: "23",
    email15: '23',
    email10: "涂装1#",
    email11: "张三",
    email12: "15899992222",
    email13: "",
    email14: "2024-04-09 14:15:35",
    type: "success",
    email17: '暂无',
    email18: '工号',
    email19: '0',
  },
  {
    email0: "DD00000002",
    email1: "100200176",
    email2: "印度",
    email3: "前大梁",
    email4: "初盘完成",
    email5: "5#",
    email6: "GYDE-2-3",
    email8: "1/2",
    email16: 'C',
    email9: "23",
    email15: '23',
    email10: "涂装1#",
    email11: "张三",
    email12: "15899992222",
    email13: "",
    email14: "2024-04-09 14:15:35",
    type: "success",
    email17: '2',
    email18: '物料',
    email19: '0',
  },
  {
    email0: "DD00000002",
    email1: "100200176",
    email2: "印度",
    email3: "前大梁",
    email4: "复核完成",
    email5: "5#",
    email6: "GYDE-2-3",
    email8: "1/2",
    email16: 'C',
    email9: "23",
    email15: '22',
    email10: "涂装1#",
    email11: "张三",
    email12: "15899992222",
    email13: "",
    email14: "2024-04-09 14:15:35",
    type: "success",
    email17: '2',
    email18: '库位',
    email19: '-1',
  }
])
defineOptions({
  // 命名当前组件
  name: "ElementPlus"
})

const router = useRouter()
function goto(path: string) {
  router.push({ path })
}

const activeName = ref("first3")
const s1 = ["领料单", "出库单", "配送单", "转运单", "退库单", "入库单", "计划单", "已完成"]
const s2 = [
  {
    label: "申请部门",
    value: "生产部"
  },
  {
    label: "车间",
    value: "1车间"
  },
  {
    label: "班组",
    value: "2班组"
  },
  {
    label: "申请人",
    value: "张三"
  },
  {
    label: "电话",
    value: "13688889999"
  }
]

const loading = ref<boolean>(false)
const { paginationData, handleCurrentChange, handleSizeChange } = usePagination()

//#region 增
const DEFAULT_FORM_DATA: CreateOrUpdateTableRequestData = {
  id: undefined,
  username: "",
  password: ""
}
const dialogVisible = ref<boolean>(false)
const formRef = ref<FormInstance | null>(null)
const formData = ref<CreateOrUpdateTableRequestData>(JSON.parse(JSON.stringify(DEFAULT_FORM_DATA)))
const formRules: FormRules<CreateOrUpdateTableRequestData> = {
  username: [{ required: true, trigger: "blur", message: "请输入用户名" }],
  password: [{ required: true, trigger: "blur", message: "请输入密码" }]
}
const handleCreateOrUpdate = () => {
  formRef.value?.validate((valid: boolean, fields) => {
    if (!valid) return console.error("表单校验不通过", fields)
    loading.value = true
    const api = formData.value.id === undefined ? createTableDataApi : updateTableDataApi
    api(formData.value)
      .then(() => {
        ElMessage.success("操作成功")
        dialogVisible.value = false
        getTableData()
      })
      .finally(() => {
        loading.value = false
      })
  })
}
const resetForm = () => {
  formRef.value?.clearValidate()
  formData.value = JSON.parse(JSON.stringify(DEFAULT_FORM_DATA))
}
//#endregion

//#region 删
const handleDelete = (row: GetTableData) => {
  ElMessageBox.confirm(`确认删除？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(() => { })
}
//#endregion

//#region 改
const handleUpdate = (row: GetTableData) => {
  dialogVisible.value = true
  formData.value = JSON.parse(JSON.stringify(row))
}
//#endregion

//#region 查
const searchFormRef = ref<FormInstance | null>(null)
const searchData = reactive({
  username: "",
  phone: ""
})
const getTableData = () => {
  loading.value = true
  getTableDataApi({
    currentPage: paginationData.currentPage,
    size: paginationData.pageSize,
    username: searchData.username || undefined,
    phone: searchData.phone || undefined
  })
    .then(({ data }) => {
      paginationData.total = data.total
      // tableData.value = data.list
    })
    .catch(() => {
      tableData.value = []
    })
    .finally(() => {
      loading.value = false
    })
}
const handleSearch = () => {
  paginationData.currentPage === 1 ? getTableData() : (paginationData.currentPage = 1)
}
const resetSearch = () => {
  searchFormRef.value?.resetFields()
  handleSearch()
}
//#endregion
const confirmEvent = () => {
  dialogVisible.value = true
}
/** 监听分页参数的变化 */
// watch([() => paginationData.currentPage, () => paginationData.pageSize], getTableData, { immediate: true })
</script>

<template>
  <div class="app-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="新建盘库" name="first3">
          <div class="flex gap-20">
            <div class="w-2/6">
              <div class="flex flex-wrap p-3">
                <div class="flex p-1" v-for="(item, index) in 10" :key="index">
                  <img src="/touxiang1.svg" class="w-10" alt="" />
                  <div>
                    张三<br />
                    13800138000
                  </div>
                </div>
              </div>
              <el-divider />
              <div class="flex flex-wrap p-3">
                <div class="flex p-1" v-for="(item, index) in 2" :key="index">
                  <div class="text-4xl">
                    <el-icon>
                      <Avatar />
                    </el-icon>
                  </div>
                  <div>
                    李四<br />
                    13800138000
                  </div>
                </div>
              </div>
            </div>
            <div class="max-w-120">
              <el-form ref="searchFormRef" class="mt-2.5" label-width="auto" :model="searchData" :rules="formRules">
                <el-form-item prop="username" label="盘库类型">
                  <el-radio-group v-model="radio1">
                    <el-radio-button label="工号" value="1" />
                    <el-radio-button label="物料" value="3" />
                    <el-radio-button label="库位" value="2" />
                  </el-radio-group>
                </el-form-item>
                <el-form-item v-if="radio1 !== '库位'" prop="username" label="产品工号">
                  <el-input v-model="searchData.username" placeholder="请选择" />
                </el-form-item>
                <el-form-item v-if="radio1 !== '库位'" prop="username" label="产品名称">
                  <div>工号选完，名称自动回填</div>
                </el-form-item>
                <el-form-item v-if="radio1 === '物料'" prop="username" label="图号">
                  <el-input v-model="searchData.username" placeholder="请输入" />
                </el-form-item>
                <el-form-item v-if="radio1 === '库位'" prop="username" label="库位">
                  <!-- <el-input v-model="searchData.username" placeholder="请选择" /> -->
                  <AA />
                </el-form-item>
                <!-- <div v-if="radio1 !== '库位'" class="text-red-500">选完产品工号会自动把在该仓库下的存放库位列出来</div> -->
                <div v-if="radio1 !== '库位'">
                  <el-form-item prop="username" v-for="(item, index) in s5" :key="index" :label="item">
                    <div class="flex">
                      <el-input v-model="searchData.username" placeholder="请选择" />
                      <div class="w-26 ml-2">复核人</div>
                      <el-input v-model="searchData.username" placeholder="请选择" />
                    </div>
                  </el-form-item>
                </div>
                <div v-else>
                  <el-form-item prop="username" label="盘库人">
                    <el-input placeholder="请选择" />
                  </el-form-item>
                  <el-form-item prop="username" label="复核人">
                    <el-input placeholder="请选择" />
                  </el-form-item>
                </div>

                <el-form-item label="备注">
                  <el-input placeholder="请输入" />
                </el-form-item>
              </el-form>
              <div class="float-right">
                <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
                <el-popconfirm title="盘库会锁定选定物料,暂不能下单,确定盘库吗" @confirm="confirmEvent" width="300">
                  <template #reference>
                    <el-button type="primary">确定</el-button>
                  </template>
                </el-popconfirm>
              </div>
            </div>
          </div>
          <div class="mt-3">
            <el-divider />
          </div>
          <h3>当日分配</h3>
          <el-table :data="tableData2">
            <!-- <el-table-column type="selection" width="50" align="center" /> -->
            <el-table-column type="index" label="序" width="70" />
            <el-table-column v-for="(item, index) in ss" :key="index" :prop="'email' + index" :label="item" />
          </el-table>
          <!-- <Journal /> -->
        </el-tab-pane>
        <el-tab-pane label="盘库中" name="first1">
          <el-form ref="searchFormRef" :inline="true" class="mt-2.5" label-width="auto" :model="searchData">
            <el-form-item prop="username" v-for="(item, index) in s3" :key="index" :label="item">
              <el-input v-model="searchData.username" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
          <div class="toolbar-wrapper">
            <div>
              <!-- <el-button type="primary">完成盘库</el-button> -->
              <el-button type="success">导出</el-button>
              <!-- <el-button type="primary" @click="$router.push('/labels/distribution')"
                >分配盘库员</el-button
              > -->
            </div>
            <div>
              <el-tooltip content="刷新当前页">
                <el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
              </el-tooltip>
            </div>
          </div>
          <div class="table-wrapper">
            <el-table :data="tableData">
              <!-- <el-table-column type="selection" width="50" align="center" /> -->
              <el-table-column type="index" label="序" width="70" />
              <el-table-column label="仓库名称" prop="email10" />
              <el-table-column label="盘库类型" prop="email18" />
              <!-- <el-table-column prop="email16" label="存放库位" align="center" /> -->
              <el-table-column prop="email2" label="产品名称" />
              <el-table-column prop="email1" label="产品工号" align="center" />
              <!-- <el-table-column prop="email0" label="图号" align="center" width="100" />
              <el-table-column prop="email3" label="名称" align="center" /> -->
              <!-- <el-table-column prop="email2" label="单位" align="center" /> -->
              <!-- <el-table-column prop="email9" label="账面数量" align="center" />
              <el-table-column label="实际数量">
                <template #default="scope">
                  <el-input v-model="scope.row.email15"></el-input>
                </template>
              </el-table-column>
              <el-table-column prop="email9" label="误差" align="center" /> -->
              <!-- <el-table-column prop="email2" label="备注" align="center" /> -->
              <el-table-column prop="email11" label="盘库人" align="center" />
              <el-table-column prop="email11" label="复核人" align="center" />
              <el-table-column prop="email4" label="状态" align="center" />
              <el-table-column prop="email17" label="差异" align="center" />
              <el-table-column label="操作" width="90" align="center">
                <template #default="scope">
                  <span style="color: #409eff; cursor: pointer; margin-right: 5px"
                    @click="goto('/labels/inventoryDetail')">完成盘库</span>
                  <span style="color: #409eff; cursor: pointer" @click="goto('/labels/inventoryDetail')">详情</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="pager-wrapper">
            <el-pagination background :layout="paginationData.layout" :page-sizes="paginationData.pageSizes"
              :total="paginationData.total" :page-size="paginationData.pageSize"
              :currentPage="paginationData.currentPage" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </el-tab-pane>
        <el-tab-pane label="我的任务" name="first2">
          <!-- <el-radio-group v-model="radio1" size="large">
            <el-radio-button label="待核对" value="待核对" />
            <el-radio-button label="已核对" value="已核对" />
          </el-radio-group> -->
          <el-form ref="searchFormRef" :inline="true" class="mt-2.5" label-width="auto" :model="searchData">
            <el-form-item prop="username" v-for="(item, index) in s4" :key="index" :label="item">
              <el-input v-model="searchData.username" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :icon="Search" @click="handleSearch">查询</el-button>
              <el-button :icon="Refresh" @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
          <!-- <el-divider /> -->

          <div class="toolbar-wrapper">
            <div>
              <el-button type="primary">初盘完成</el-button>
              <el-button type="primary">复核完成</el-button>
              <el-button type="success">导出</el-button>
              <!-- <el-button type="primary" @click="$router.push('/labels/distribution')"
                >分配盘库员</el-button
              > -->
            </div>
            <div>
              <el-tooltip content="刷新当前页">
                <el-button type="primary" :icon="RefreshRight" circle @click="getTableData" />
              </el-tooltip>
            </div>
          </div>
          <div class="table-wrapper">
            <el-table :data="tableData">
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column type="index" label="序" width="70" />
              <el-table-column prop="email2" label="产品名称" />
              <el-table-column prop="email1" label="产品工号" align="center" />
              <el-table-column prop="email0" label="图号" align="center" width="100" />
              <el-table-column prop="email3" label="名称" align="center" />
              <!-- <el-table-column prop="email2" label="单位" align="center" /> -->
              <el-table-column prop="email16" label="存放库位" align="center" />
              <el-table-column prop="email9" label="账面数量" align="center" />
              <el-table-column label="实际数量">
                <template #default="scope">
                  <el-input v-model="scope.row.email15"></el-input>
                </template>
              </el-table-column>
              <el-table-column label="误差" align="center">
                <template #default="scope">
                  <span v-if="scope.row.email19 === '0'">{{ scope.row.email19 }}</span>
                  <span v-else class="text-red-500">{{ scope.row.email19 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="email11" label="盘库人" align="center" />
              <el-table-column prop="email11" label="复核人" align="center" />
              <el-table-column label="备注" align="center">
                <el-input></el-input>
              </el-table-column>
              <!-- <el-table-column label="操作" width="100" align="center">
            <span style="color: #409eff; cursor: pointer" @click="goto('/labels/overxq')"
              >详情</span
            >
          </el-table-column> -->
            </el-table>
          </div>
          <div class="pager-wrapper">
            <el-pagination background :layout="paginationData.layout" :page-sizes="paginationData.pageSizes"
              :total="paginationData.total" :page-size="paginationData.pageSize"
              :currentPage="paginationData.currentPage" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <!-- 新增/修改 -->
    <el-dialog v-model="dialogVisible" title="盘库信息" @closed="resetForm" width="30%">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" label-position="left">
        <el-form-item prop="username" label="仓库名称">
          <div>1#库(默认回填当前所在库)</div>
        </el-form-item>
        <el-form-item prop="username" label="产品工号">
          <el-input v-model="formData.username" placeholder="请选择" />
        </el-form-item>
        <el-form-item prop="username" label="产品名称">
          <div>印度</div>
        </el-form-item>
        <el-form-item prop="username" label="分配任务">
          选择库位<el-input v-model="formData.username" placeholder="请选择" />
          选择盘库人<el-input v-model="formData.username" placeholder="请选择" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleCreateOrUpdate" :loading="loading">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style>
.el-divider--horizontal {
  margin: 0 0 18px 0;
}
</style>
<style lang="scss" scoped>
.search-wrapper {
  margin-bottom: 20px;

  :deep(.el-card__body) {
    padding-bottom: 2px;
  }
}

.toolbar-wrapper {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.table-wrapper {
  margin-bottom: 20px;
}

.pager-wrapper {
  display: flex;
  justify-content: flex-end;
}
</style>
